<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: oldliu
  Date: 2022/9/5
  Time: 22:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #main{
            display: flex;

        }

        #main #left{
            width: 15%;
            position: fixed;

        }
        a{
            text-decoration: none;
            color: black;
        }
        #main #left ul{
            display: flex;
            flex-wrap: wrap;
        }
        #main #left li{
            list-style: none;
            height: 20px;
            width: 20px;
            background-color: lightgrey;
            margin: 2px;
            text-align: center;
        }
        #main #right{
            width:84%;
            margin-left: 150px;
        }
        #main #left li.sel{
            background-color: grey;
        }
    </style>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
      $(function () {
          //计时开始
          var total=${times};//秒数
          var timer=window.setInterval(function () {
              total--;
              //计算还有多少分钟，多少秒
              let str=parseInt(total/60)+"分"+(total%60)+"秒";
              $("#time").html(str);
              //时间到了，强制交卷，待实现
              if(total==0)
                  window.clearInterval(timer);
          },1000);
          //选中后，改变对应题号样式
          $(".content :checkbox").click(function () {
              let l=$(".content :checkbox[value="+$(this).val()+"]:checked").length;
              let qid=$(this).attr("qid");
              if(l>0){
                  //改变样式
                  $(".lefttip li[qid="+qid+"]").addClass("sel");
                  //把答案绑定到元素li上
                  let ar=$(this).parent().parent().parent().find(":checkbox[name=youanswer]:checked");
                  //console.log(ar.length+",,,,,,,,,,,,,,,,,,");
                  let str="";
                  for(let i=0;i<ar.length;i++){
                      str+=ar[i].value;
                      if(i<ar.length-1){
                          str+=","
                      }
                  }
                  //console.log(str,"????????????");
                  $(".lefttip li[qid="+qid+"]").attr("answer",str);
              } else{
                  $(".lefttip li[qid="+qid+"]").removeClass("sel");
                  $(".lefttip li[qid="+qid+"]").attr("answer","");
              }
                //$(".lefttip li[qid="+$(this).val()+"]").css("background-color","gray");
          });
          //交卷时候判断是否做完
          $("#jiaojuan").click(function () {
              if($(".lefttip li[qid]:not(.sel)").length==0){
                  if(!window.confirm("真的交卷？")){
                      return false;
                  }
              }else{
                  if(!window.confirm("题目没有做完，真的交卷？")){
                      //
                     return false;
                  }
              }

              //交卷
              let ques=[]; //放入数组
              let ar=$(".lefttip li[qid]");
               ar.each(function (o,i) {
                   ques.push({quizid:${quizid},qid:$(this).attr("qid"),result:$(this).attr("realanwer")==$(this).attr("answer"),uid:${STUDENT_LOGIN.id},answer:$(this).attr("answer")||""})
               });
               alert(JSON.stringify(ques));
              //JSON.parse()//string->json
              //JSON.stringify()// json->string
              $.post("savequiz.stu",{youanswer:JSON.stringify(ques)},function (r) {
                  alert(JSON.stringify(r));
              });
              // $.ajax({
              //     url:"savequiz.stu",
              //     data:JSON.stringify(ques),
              //     success:function (r) {
              //
              //     },
              //     error:function (r) {
              //
              //     }
              // })
              return true;

          });
      });
    </script>
</head>
<body>
<h1>小测试</h1>
<div id="main">
    <div id="left">
        <div>
            <h3>练习用时</h3>
            <span id="time"></span>
        </div>
        <div>
            <button id="jiaojuan">我要交卷</button>
        </div>
        <ul class="lefttip">
            <c:forEach items="${questions}" varStatus="s" var="q">
                <li qid="${q.id}" realanwer="${q.answers}">
                    <a href="#q_${q.id}" >${s.count}</a>
                </li>
            </c:forEach>
        </ul>
    </div>
    <div id="right">
        <c:forEach items="${questions}" var="q" varStatus="s">
            <div class="content">
                <a name="q_${q.id}"></a>
                <div >
                    <pre id="content"><strong>${s.count}:</strong><c:out value="${q.title}"/></pre>
                    <c:if test="${q.picture!=null}">
                        <img src="${q.pictBase64}"/>
                    </c:if>
                </div>
                <p>
                <ol type="A">
                    <c:forEach items="${q.options}" var="op" varStatus="s">
                        <li>
            <pre><input type="checkbox" name="youanswer" qid="${q.id}" value="${s.index}"/>:<c:out value="${op}"/>
            </pre>
                        </li>
                    </c:forEach>
                </ol>
                </p>
            </div>
        </c:forEach>
    </div>
</div>
</body>
</html>
